<template>
    <div class="customer-service-page">
        <div class="service-container">
            <div class="service-header">
                <h2>联系客服</h2>
                <p class="subtitle">7×24小时为您服务</p>
            </div>

            <div class="qr-code-section">
                <div class="qr-code-container">
                    <div class="qr-code-box">
                        <img
                                src="imgs/wx.jpg"
                                alt="微信客服二维码"
                                class="qr-code-image"
                        >
                        <p class="qr-tip">微信扫一扫，联系客服</p>
                    </div>
                </div>

                <div class="contact-methods">
                    <div class="contact-item">
                        <el-icon :size="24" class="contact-icon"><ChatDotRound /></el-icon>
                        <div class="contact-info">
                            <h3>在线客服</h3>
                            <p>工作日 9:00-18:00</p>
                        </div>
                    </div>

                    <div class="contact-item">
                        <el-icon :size="24" class="contact-icon"><Phone /></el-icon>
                        <div class="contact-info">
                            <h3>客服电话</h3>
                            <p>400-123-4567</p>
                        </div>
                    </div>

                    <div class="contact-item">
                        <el-icon :size="24" class="contact-icon"><Message /></el-icon>
                        <div class="contact-info">
                            <h3>客服邮箱</h3>
                            <p>limr0210@163.com</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ChatDotRound, Phone, Message } from '@element-plus/icons-vue'
</script>

<style scoped>

.service-header {
    text-align: center;
    margin-bottom: 40px;
}

.service-header h2 {
    font-size: 28px;
    color: #303133;
    margin-bottom: 8px;
}

.subtitle {
    font-size: 16px;
    color: #909399;
}

.qr-code-section {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
    align-items: center;
}

.qr-code-container {
    flex: 1;
    min-width: 300px;
    display: flex;
    justify-content: center;
}

.qr-code-box {
    text-align: center;
    padding: 20px;
    border: 1px solid #ebeef5;
    border-radius: 8px;
    background: #fafafa;
}

.qr-code-image {
    width: 200px;
    height: 200px;
    margin-bottom: 16px;
}

.qr-tip {
    font-size: 16px;
    color: #606266;
}

.contact-methods {
    flex: 1;
    min-width: 300px;
}

.contact-item {
    display: flex;
    align-items: center;
    margin-bottom: 24px;
    padding: 16px;
    border-radius: 8px;
    transition: all 0.3s;
}

.contact-item:hover {
    background-color: #f5f7fa;
}

.contact-icon {
    margin-right: 16px;
    color: #409eff;
}

.contact-info h3 {
    font-size: 18px;
    color: #303133;
    margin-bottom: 4px;
}

.contact-info p {
    font-size: 14px;
    color: #606266;
    margin: 0;
}

@media (max-width: 768px) {
    .qr-code-section {
        flex-direction: column;
    }

    .qr-code-container,
    .contact-methods {
        width: 100%;
    }
}
</style>